<style scoped></style>

<template>
    <div>
        <Modal
            title="添加楼盘信息"
            :value="value"
            @on-ok="save"
            @on-visible-change="visibleChange"
            width="800"
        >
            <Form
                ref="floorForm"
                label-position="top"
                :rules="floorRole"
                :model="floor"
            >
                <Card>
                    <p slot="title">基本信息</p>

                    <Row :gutter="16">
                        <Col span="16">
                            <FormItem label="标题" prop="title">
                                <Input
                                    v-model="floor.title"
                                    :maxlength="256"
                                    :minlength="2"
                                ></Input>
                            </FormItem>
                        </Col>
                        <Col span="4">
                            <FormItem prop="showOnHome" label=" ">
                                <Checkbox v-model="floor.showOnHome"
                                    >首页推荐</Checkbox
                                >
                            </FormItem>
                        </Col>
                        <Col span="4">
                            <FormItem prop="inSlider" label=" ">
                                <Checkbox v-model="floor.inSlider"
                                    >幻灯片</Checkbox
                                >
                            </FormItem>
                        </Col>
                    </Row>
                    <Row :gutter="16">
                        <Col span="6">
                            <FormItem label="参考价格" prop="price">
                                <Input
                                    v-model="floor.price"
                                    :maxlength="64"
                                    placeholder="10000 元/㎡"
                                ></Input>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem label="建筑面积" prop="area">
                                <Input
                                    v-model="floor.area"
                                    :maxlength="32"
                                    placeholder="10000 ㎡"
                                ></Input>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem label="类型" prop="type">
                                <Input
                                    v-model="floor.type"
                                    :maxlength="32"
                                    placeholder="别墅"
                                ></Input>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem label="户型" prop="layout">
                                <Input
                                    v-model="floor.layout"
                                    :maxlength="32"
                                    placeholder="3/4居"
                                ></Input>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row :gutter="16">
                        <Col span="6">
                            <FormItem label="结构" prop="structure">
                                <Input
                                    v-model="floor.structure"
                                    :maxlength="32"
                                    placeholder="联排别墅"
                                ></Input>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem label="开盘日期" prop="openDate">
                                <DatePicker
                                    :value="floor.openDate"
                                    @on-change="floor.openDate = $event"
                                    type="date"
                                    placeholder="选择日期"
                                ></DatePicker>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem
                                label="所属地区"
                                style="width: 100%"
                                prop="regionId"
                            >
                                <RegionSelect
                                    v-model="floor.regionId"
                                ></RegionSelect>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem label="装修类型" prop="fitUp">
                                <Input
                                    v-model="floor.fitUp"
                                    :maxlength="32"
                                    placeholder="毛坯"
                                ></Input>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row :gutter="16">
                        <Col span="18">
                            <FormItem label="详细地址" prop="address">
                                <Input
                                    v-model="floor.address"
                                    :maxlength="512"
                                ></Input>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem label="产权年限" prop="ageLimit">
                                <Input-number
                                    :max="200"
                                    :min="1"
                                    v-model="floor.ageLimit"
                                ></Input-number>
                            </FormItem>
                        </Col>
                    </Row>
                    <FormItem prop="feature" label="楼盘特色">
                        <Input type="textarea" v-model="floor.feature"></Input>
                    </FormItem>
                    <Row :gutter="16">
                        <Col span="20">
                            <FormItem prop="feature" label="小区信息">
                                <Select
                                    v-model="floor.villageId"
                                    @on-select="onSelect"
                                >
                                    <Option
                                        v-for="item in villageList"
                                        :value="item.id"
                                        :key="item.id"
                                        >{{ item.name }}</Option
                                    >
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="4">
                            <FormItem label=" ">
                                <Button type="primary" @click="addVillage"
                                    >添加小区</Button
                                >
                            </FormItem>
                        </Col>
                        <Col span="24" v-if="!!selectVillage">
                            <VillageDetail
                                :village="selectVillage"
                            ></VillageDetail>
                        </Col>
                    </Row>
                </Card>
                <Card style="margin-top: 16px">
                    <p slot="title">楼盘图片</p>
                    <MultiPicture
                        ref="upload"
                        v-model="imageUrls"
                        :requestData="{ pictureType: 'FloorImage' }"
                        @on-delete-success="deleteImage"
                    ></MultiPicture>
                </Card>
                <Card style="margin-top:16px">
                    <p slot="title">楼盘详情</p>
                    <FormItem label=" " prop="content" v-if="value && typeof(floor.content) == 'string'">
                        <Editor  @onBlur="editorBlur('content')" v-model="floor.content" :init="tinymceInit"></Editor>
                    </FormItem>
                </Card>
            </Form>
            <div slot="footer">
                <Button @click="cancel">{{ L("Cancel") }}</Button>
                <Button @click="save" type="primary">{{ L("OK") }}</Button>
            </div>
        </Modal>
        <create-village
            v-model="createVillageModalShow"
            @save-success="addVillageSuccess"
        ></create-village>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "@/lib/util";
import Ajax from "@/lib/ajax";
import AbpBase from "@/lib/abpbase";
import Floor from "@/store/entities/estate/Floor";
import Village from "@/store/entities/estate/Village";
import RegionSelect from "../../../components/region-select.vue";
import MultiPicture from "../../../components/multi-picture.vue";
import CreateVillage from "../villages/create-Village.vue";
import VillageDetail from "@/components/villages/village-detail.vue";
import Editor from "@tinymce/tinymce-vue";
import TinymceInit from "@/lib/TinymceInit";
@Component({
    components: { RegionSelect, MultiPicture, CreateVillage, VillageDetail,Editor },
})
export default class extends AbpBase {
    @Prop({ type: Boolean, default: false }) value: boolean;

    tinymceInit = TinymceInit;

    floor: Floor = new Floor();
    imageUrls: Array<string> = new Array<string>();
    village: Village = new Village();

    selectVillage: Village = null;

    villageList: Array<Village> = new Array<Village>();

    
    addVillageSuccess(rsp) {
        let v = rsp as Village;
        //console.log(v);
        this.villageList.unshift(v);
        this.$nextTick(() => {
            this.floor.villageId = v.id;
        });
    }
    onSelect(village) {
        let v = this.villageList.find((item) => {
            return item.id == village.value;
        });
        this.selectVillage = v as Village;
    }
    createVillageModalShow: boolean = false;

    editorBlur(filedName) {
        (this.$refs.floorForm as any).validateField(filedName);
    }

    deleteImage(imageUrl) {
        //Ajax.delete('/api/services/app/FloorImage/DeleteByImageUrl?ImageUrl='+imageUrl);
    }
    async getVillageList() {
        let reponse = await Ajax.get("/api/services/app/Village/GetAllList");
        this.villageList = reponse.data.result as Array<Village>;
    }
    addVillage() {
        this.createVillageModalShow = true;
    }
    save() {
        console.log(this.floor);
        (this.$refs.floorForm as any).validate(async (valid: boolean) => {
            if (valid) {
                let postData = {
                    floor: this.floor,
                    imageUrls: this.imageUrls,
                };
                // if (this.imageUrls.length>0) {
                //     postData.imageUrls = this.imageUrls;
                // }
                await this.$store.dispatch({
                    type: "floor/createEx",
                    data: postData,
                });

                this.floor = new Floor();

                setTimeout(() => {
                    (this.$refs.floorForm as any).resetFields();
                }, 1000);

                this.$emit("save-success");
                this.$emit("input", false);
            }
        });
    }
    cancel() {
        (this.$refs.floorForm as any).resetFields();

        this.$emit("input", false);
    }
    visibleChange(value: boolean) {
        if (!value) {
            this.$emit("input", value);
        }
    }
    created() {
        this.getVillageList();
    }
    floorRole = {
        title: [
            {
                required: true,
                message: "请输入标题",
                trigger: "blur",
            },
            {
                type: "string",
                max: 256,
                message: "最长不得超过256个字符",
                trigger: "blur",
            },
        ],
        price: [
            {
                type: "string",
                max: 64,
                message: "最长不得超过64个字符",
                trigger: "blur",
            },
        ],
        area: [
            {
                type: "string",
                max: 32,
                message: "最长不得超过32个字符",
                trigger: "blur",
            },
        ],
        type: [
            {
                type: "string",
                max: 32,
                message: "最长不得超过32个字符",
                trigger: "blur",
            },
        ],
        layout: [
            {
                type: "string",
                max: 32,
                message: "最长不得超过32个字符",
                trigger: "blur",
            },
        ],
        structure: [
            {
                type: "string",
                max: 32,
                message: "最长不得超过32个字符",
                trigger: "blur",
            },
        ],
        address: [
            {
                type: "string",
                max: 512,
                message: "最长不得超过512个字符",
                trigger: "blur",
            },
        ],
        feature: [
            {
                type: "string",
                max: 512,
                message: "最长不得超过512个字符",
                trigger: "blur",
            },
        ],
        fitUp: [
            {
                type: "string",
                max: 32,
                message: "最长不得超过32个字符",
                trigger: "blur",
            },
        ],
    };
}
</script>